<template>
  <view>
    <view v-for="item in goods.orderDetailList" :key="item.id">
      <orderItemNew
        :rejectedStatus="goods.rejectedStatus"
        :onlyRejectedStatus="goods.onlyRejectedStatus"
        :status="goods.status === 3 || goods.status === 2"
        :goods="item"
        @tui="tuihuo"
      ></orderItemNew>
    </view>
    <view class="goods c-p15">
      <view class="c-flex item c-mt20">
        <view class="c-flex-3"> 订单编号 </view>
        <view class="c-flex-7 c-text-right">{{ goods.sn }}</view>
      </view>
      <view class="c-flex item c-mt20">
        <view class="c-flex-3"> 订单价格 </view>
        <view class="c-flex-7 c-text-right c-fw600">￥ {{ goods.payableAmount }}</view>
      </view>
      <view class="c-flex item c-mt20">
        <view class="c-flex-3"> 订单状态 </view>
        <view class="c-flex-7 c-text-right" :class="{'c-fw600': goods.status !== 3, 'c-green': goods.status === 4}">{{
          goods.status === 1 ? '未支付' : goods.status === 2 || goods.status === 3 ? '已支付' : '已完成'
        }}</view>
      </view>
      <view v-if="goods.status === 1" class="c-flex c-mt30">
        <view class="c-flex-3 color-main c-line-h-60"> </view>
        <view class="c-flex-7 c-text-right">
          <button @click="quxiao" class="">取消订单</button>
        </view>
      </view>
      <view v-if="goods.status === 3 || goods.status === 2" class="c-flex c-mt30">
        <view class="c-flex-3 color-main c-line-h-60"> </view>
        <view class="c-flex-7 c-text-right">
          <button @click="shouhuo">确认收货</button>
        </view>
      </view>
      <view v-if="goods.status === 5" class="c-flex c-mt30">
        <view class="c-flex-3 color-main c-line-h-60"> 删除记录 </view>
        <view class="c-flex-7 c-text-right">
          <button @click="quxiaotuikuan" class="c-mr10">取消退款</button><button>查看详情</button>
        </view>
      </view>
    </view>
    <view class="c-width-100 line"></view>
  </view>
</template>

<script>
  import order from '@/services/order'
  import orderItemNew from './../order-item-new/index.vue'
  export default {
    props: ['goods', 'i'],
    data() {
      return {}
    },
    components: {
      orderItemNew
    },
    methods: {
      shouhuo() {
        order.take(this.goods.id).then(data => {
          wx.showToast({
            title: '收货成功',
            duration: 2000
          })
          this.$emit('shouhuo')
        })
      },
      tuihuo(id) {
        wx.navigateTo({
          url: '/pages/sales/aaa?id=' + id + '&status=' + this.goods.status + '&orderid=' + this.goods.id
        })
      },
      quxiao() {
        order.cancel(this.goods.id).then(data => {
          wx.showToast({
            title: '操作成功',
            duration: 2000
          })
          this.$emit('quxiao')
        })
      },
      quxiaotuikuan() {}
    }
  }
</script>
<style scoped>
  .c-flex >>> uni-button {
    display: inline-block;
  }
</style>
<style lang="scss" scoped>
  .goods {
    background: #fff;
  }
  .button-box {
    width: 80%;
    margin: 0 auto;
  }
  .line {
    height: 2px;
    background: #f1f1f1;
  }
  .c-green {
    color: #06c284;
  }
  image {
    width: 190rpx;
    border-radius: 10rpx;
    height: 190rpx;
  }
  .title {
    color: #000;
    font-size: 32rpx;
    font-weight: 500;
    margin-top: 16rpx;
  }
  .desc {
    font-size: 28rpx;
    color: #aaa;
    padding-bottom: 30rpx;
    // margin-top: 60rpx;
  }
  .item {
    .c-flex-3 {
      color: #a7adba;
      font-size: 26rpx;
    }
    .c-flex-7 {
      font-size: 26rpx;
    }
  }
  button {
    display: inline-block;
    width: 200rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    background: $main-color;
    color: #fff;
    border-radius: 20rpx;
    font-size: 30rpx;
  }

  .refund {
    color: #f31f42;
  }
</style>
